import React,{ Component ,useRef, Fragment, useState } from 'react';
import { Card, Table, Space, Modal, Form, Input, Button, Spin, Popconfirm } from 'antd';
import { connect } from 'react-redux';
import { EditOutlined, ShareAltOutlined, DeleteOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';

// 更新弹出层
function RenderModal1(props) {
  const { record, modelVisible, cancle , onOk} = props;
  const form = useRef();
  return(
    <Modal 
      title='修改一级标题' 
      visible={modelVisible} 
      onCancel={cancle} 
      okText='修改' 
      cancelText='取消'
      onOk={() => {form.current.submit()}}> 
      <Form name='form-updata-first' ref = {form} onFinish={onOk}>
        <Form.Item initialValue={record.firstRequirementId} name='firstRequirementId' noStyle />
        <Form.Item name='detail' initialValue={record.detail} label={<div>简要描述</div>}>
          <Input />
        </Form.Item>
        <Form.Item name='description' initialValue={record.description} label={<div>详细描述</div>}>
          <Input.TextArea style={{height:'200px'}}/>
        </Form.Item>
      </Form>
    </Modal>
  )
}

// 新增弹出层
function RenderModal2(props) {
  const { modelVisible, cancle , onOk} = props;
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  return(
    <Modal 
      title='新增一级标题' 
      visible={modelVisible} 
      onCancel={cancle} 
      okText='新增' 
      cancelText='取消' 
      forceRender
      okButtonProps={{loading:loading}}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            // 
            onOk(values, () => {form.resetFields();setLoading(false);} )
            form.resetFields();
            cancle();
            // onCreate(values);
          })
          .catch((info) => {
            
          });
      }}> 
      <Form name='form-add-first' onFinish={onOk} form={form}>
        <Form.Item name='firstRequirementNo' label={<span>指标编号</span>} 
          rules={[{required: true,message: '请输入指标'}]}>
          <Input placeholder='指标编号：1（数字）'/>
        </Form.Item>
        <Form.Item name='detail' label={<div>简要描述</div>}
          rules={[{required: true,message: '请输入简要描述'}]} >
          <Input />
        </Form.Item>
        <Form.Item name='description' label={<div>详细描述</div>}
        rules={[{required: true,message: '请输入详细描述'}]}>
          <Input.TextArea style={{height:'200px'}}/>
        </Form.Item>
      </Form>
    </Modal>
  )
}



class Graduation extends Component {
  
  state = {
    modelVisible1: false, // 修改弹出层
    modelVisible2: false, //新增弹出层
    record: {},
    loading: '',
  }

  columns = [
    {
      title: '毕业要求',
      dataIndex: 'firstRequirementNo',
      key: 'firstRequirementNo',
    },
    {
      title: '详细描述',
      dataIndex: 'description',
      key: 'description',
      render: (text) => {
        return(
          <span>{text.length <= 50 ? text : `${text.substring(0,50)}...`}</span>
        )
      }
    },
    {
      title: '简要描述',
      dataIndex: 'detail',
      key: 'detail',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => {

        return (
          <Space size="middle">
            <a onClick={() => {this.showMyModal('modelVisible1',record)}}><EditOutlined />修改</a>
            <Popconfirm
              title="确认删除该指标?"
              onConfirm={() => {this.props.delRequirement({firstRequirementId:record.firstRequirementId})}}
              onCancel={() => null}
              okText="删除"
              cancelText="取消"
            >
              <a><DeleteOutlined />删除</a>
            </Popconfirm>
            <Link to={`/admin/seconf-graduation?id=${record.firstRequirementId}`}><ShareAltOutlined />拆分</Link>
          </Space>
        )
      }
    },
  ];


  componentDidMount() {
    this.props.getFirstRequirement();
  }

  getSecond = (e) => {
    const { history } = this.props;
    history.push({
      pathname: `/admin/seconf-graduation?id=${e.target.getAttribute('role')}`,
      state: {
        // firstRequirementId: e.target.getAttribute('role')
      }
    })
  }


  showMyModal = (name,record) => { // 为传record则把record更新为{}
    this.setState({
      record: record || {},
      [name]: true
    })
  }

  hiddenModal = (name) => {
    this.setState({
      [name]: false,
      record: {}
    })
  }
  // handleOk = () => {
  // }

  update = (e) => {
    this.props.updateRequirement(e);
    this.setState({
      modelVisible1: false,
      detail: {}
    })
  }

  add = (values, callback) => {
    // 
    this.props.addRequirement(values,() => {
      this.setState({
        modelVisible2: false
      });
      callback();
    })
  }

  // del = (id) => {this.props.delRequirement({id})}

  render(){
    
    const { store } = this.props;
    const { modelVisible1, record, modelVisible2 } = this.state;
    return(
      <Spin spinning={store.loading}>
        <Card title={
          <Fragment>
            <Button type='primary' onClick={() => {this.showMyModal('modelVisible2')}}>新增指标</Button>
          </Fragment>
        }>
          <Table dataSource={store.firstRequirement} columns={this.columns} rowKey='firstRequirementId'/>
          { modelVisible1 && <RenderModal1 record={record} modelVisible={modelVisible1} onOk = {this.update} 
            cancle = { () => this.hiddenModal('modelVisible1') }/>}
          { modelVisible2 && <RenderModal2 modelVisible={modelVisible2} onOk = {this.add} 
            cancle = {() => this.hiddenModal('modelVisible2')} /> } 
        </Card>
      </Spin>
    )
  }
}

const mapStateToProps = state => ({
  store: state.graduationNeed
})

const mapDispatchToPorps = dispatch => ({
  getFirstRequirement: dispatch.graduationNeed.getFirstRequirement,
  updateRequirement: dispatch.graduationNeed.updateRequirement,
  addRequirement: dispatch.graduationNeed.addRequirement,
  delRequirement: dispatch.graduationNeed.delRequirement
})

export default connect(
  mapStateToProps,
  mapDispatchToPorps
)(Graduation)